<template>
<div class="container">
    <el-form ref="form" :model="form" label-width="80px">
    <el-row>
        <el-col :span="5" style="min-width:230px">
            <div class="container" style="min-height:300px;">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="组织架构" name="组织架构">
                        <el-tree
                            @node-click="handleNodeClick"
                            default-expand-all
                            :data="data"
                            :props="customProps">
                        </el-tree>
                    </el-tab-pane>
                    <el-tab-pane label="员工" name="员工">
                        <el-input style="border-radius: 0 5px 5px 0;font-size:8px;" placeholder="请输入关键字" @change="searchstaff" v-model.trim="searchName">
                            <el-button slot="append" @click="handleSearch">搜索</el-button>
                        </el-input>
                        <div class="staffcontent">
                            <div class="staffuser" v-for="(item,index) in userList" @click="handlestaff(index)" :key="index">
                                <span class="name-circle">{{item.username}}</span>
                                <span style="margin-left:20px;">{{item.name}}</span>
                                <span style="float:right;">{{item.phone}}</span>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-col>
        <el-col :span="18" style="margin-left:10px;" >
            <div class="container" style="min-height:70%;">
                <h3 style="display:inline-block;">{{bumen}}</h3> <h3 style="display:inline-block;" v-if="ifshow">（{{bumenname}}）</h3>
                <!-- <el-tabs v-model="activetabs"> -->
                    <!-- <el-tab-pane label="生产追溯系统" name="生产追溯系统">
                        <el-checkbox-group v-model="checked" style="margin-top:20px;">
                            <div v-for="(item,index) in list" :key="index" v-if="index > num"  class="checkbox-content" >
                                <el-checkbox  :label="item.id"  @change="handlecheckbox1(index)">{{item.name}}</el-checkbox>
                                <el-checkbox-group v-model="checked" class="checked-right" style="margin-top:20px; display:inline-block;">
                                    <el-checkbox v-for="(s,sindex) in item.children" @change="handlecheckbox(sindex)"  :key="sindex" :label="s.id">{{s.name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-checkbox-group>
                    <!-- </el-tab-pane> -->
                    <!-- <el-tab-pane label="系统设置" name="系统设置"> -->
                        <el-checkbox-group v-model="checked" style="margin-top:20px;" >
                            <div v-for="(item,index) in list" :key="index"  class="checkbox-content" >
                                <el-checkbox  :label="item.id"  @change="handlecheckbox1(index)">{{item.name}}</el-checkbox>
                                <el-checkbox-group v-model="checked" class="checked-right" style="margin-top:20px; display:inline-block;">
                                    <el-checkbox v-for="(s,sindex) in item.children" @change="handlecheckbox(sindex)"  :key="sindex" :label="s.id">{{s.name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-checkbox-group>
                    <!-- </el-tab-pane> -->
                <!-- </el-tabs> -->
            </div>
        </el-col>
    </el-row>
	<el-form-item class="footerFixed" v-if="added">
        <el-button type="primary"  @click="menu_save">提交</el-button>
    </el-form-item>
    </el-form>
</div>

</template>

<script>
    import {jurisdiction_saveuser,jurisdiction_user,jurisdiction_staff,staffuser_findByAll,company_findById,jurisdiction,jurisdiction_saveMenu,jurisdiction_getMenu} from '@/request/api'
    import { menu_findByAll as menuFindByAll } from "@/request/manageapi";
    export default {
        inject:['reload'],
        data() {
            return {
                num:"",
                bumenname:'',
                ifshow:false,
                added:true,
                activetabs:'生产追溯系统',
                userList:'',
                searchName:'',
                activeName:'组织架构',
                form:{},
                disabled:true,
                list:[],
                checked:[],
                checkeds:[],
                shangji:'',
                bumen:'',
                defaultProps:{
                    children:'',
                    label:'label'
                },
                // activeName: '1',
                tableData: [],
                // form:{
                //     name:'',
                //     parentId:'',
                // },
                data: [],
                isShow:true,
                delid:'',
                departmentId:'',
                customProps:{
                    label:'name',
                    children:'children',
                    id:'id'
                },
            };
        },
        mounted(){
            this.init()
            this.init1()
            this.init2()
        },
        created(){
            var data = JSON.stringify(this.$store.state.qx)
            var a = "编辑"

        },
        methods: {
            menuFindByAll(){
                menuFindByAll().then(res=>{
                    console.log(res)
                })
            },
            handlestaff(index){
                // this.ifshow = true
                if(this.userList[index].department == "" || this.userList[index].department == null){
                    this.ifshow = false
                }else{
                    this.ifshow = true
                    this.bumenname = this.userList[index].department
                }

                this.bumen = this.userList[index].name
                this.id = this.userList[index].id
                this.delid = this.userList[index].departmentId
                jurisdiction_user(this.userList[index].id).then((res)=>{
                    if(res.data == ""){
                        if(this.delid == ""){
                            this.checked = []
                        }else{
                            this.getMenu()
                        }
                    }else{
                        var str = res.data
                        var arr = []
                        for (let i = 0; i < str.length; i++) {
                            arr.push(str[i].menuId)
                        }
                        this.checked = arr
                    }
                })
            },
            handleClick(){

            },
            searchstaff(){
                this.init2()
            },
            handleSearch(){
                this.init2()
            },
            init2(){
                jurisdiction_staff("?name="+this.searchName).then((res)=>{
                    this.userList = res.data
                    for (let i = 0; i < this.userList.length; i++) {
                       this.userList[i].username = this.userList[i].name.substring(0,1)
                    }
                })
            },
            init1(){
                var id = localStorage.getItem("companyId")
                company_findById(id).then((res)=>{
                    this.data.push({id:res.data.id,name:res.data.name,children:[]})
                    this.bumen = res.data.name
                    this.departmentId = res.data.id
                    staffuser_findByAll("").then((res)=>{
                        this.data[0].children = res.data
                    })
                })
            },
            getMenu(){
                jurisdiction_getMenu(this.delid).then((res)=>{
                     var str = res.data
                    var arr = []
                    for (let i = 0; i < str.length; i++) {
                        arr.push(str[i].menuId)
                    }
                    this.checked = arr
                })
            },
            menu_save(){
                var arr = []
                for (let i = 0; i < this.checked.length; i++) {
                    arr.push({menuId:this.checked[i]})
                }
                this.$confirm('是否确认提交', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(this.activeName == "组织架构"){
                        let data = {
                            id:this.delid,
                            departmentMenus:arr
                        }

                        jurisdiction_saveMenu(data).then((res)=>{
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success'
                            });
                        })
                    }else{
                        let data = {
                            id:this.id,
                            userMenus:arr
                        }
                        jurisdiction_saveuser(data).then((res)=>{
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success'
                            });
                        })
                    }
                }).catch(() => {

                });

            },
            handlecheckbox(index,sindex){

            },
            handlecheckbox1(index){

            },
            init(){
                let isManage = ''
                let type = localStorage.getItem('userType')
                if(type == '1'){
                    isManage = 2
                }else {
                    isManage = 1
                }
                // console.log(type)
                jurisdiction(`?isManage=${isManage}`).then((res)=>{
                    this.list = res.data
                    var arr = []
                    for (let index = 0; index < this.list.length; index++) {
                        if(this.list[index].name == "权限配置"){
                           arr.push({name:'权限设置'})
                        }
                        if(this.list[index].name == "系统日志"){
                            arr.push({name:'系统日志'})
                        }
                    }
                    if(arr.length == 2){
                        this.num = 13
                    }else{
                        if(arr.length == 1){
                            this.num = 12
                        }
                        if(arr.length == 0){
                            this.num = 11
                        }
                    }
                })
            },

            handleNodeClick(ele){
                this.ifshow = false

                this.bumen = ele.name
                var id = localStorage.getItem("companyId")


                    this.delid = ele.id

                this.getMenu()
            },
        }
    }
</script>

<style scoped>
.name-circle{
    width:25px;
    line-height:25px;
    text-align: center;
    height:25px;
    border-radius: 50%;
    background:#909399;
    display: inline-block;
}
.staffuser{
    font-size:12px;
    height:35px;
    line-height:35px;
    cursor: pointer;
}
.staffcontent{
    margin-top:20px;
    height:300px;
    overflow-y: auto;
}
.checked-right{
    position: absolute;
    left:150px;
    top:-12px;
}
.checkbox-content{
    height:30px;
    line-height:30px;
    position: relative;
    border: 1px solid #dcdfe6;
    padding:8px;
}
.el-row{ margin-bottom: 20px;}
.el-pagination{
    text-align: center;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
</style>
